<?php slot('me','cur'); ?>
<!--主体-->
<div class="wrap-main left">
	<div class="wrap-center">
    	<div class="wrap-left">
            <div class="wrap-main left" style="padding-top:0px;">
                <div class="menu-tab" style="width:920px;">
                    <ul class="menu-li left" style="width:918px;">
                        <li class="cur"><a href="">发现</a></li>
                        <li><a href="">动态</a></li>
                        <li><a href="">活动</a></li>
                    </ul>
                </div>
            </div>
            <div class="wrap-main left">
            <div class="inwrap" style="width:920px;">
                <div id="main" role="main">
                    <ul id="tiles">
                        <!-- 这里显示获取的内容 -->
                    </ul>
                    
                    <div id="loader">
                        <div id="loaderCircle"></div>
                    </div>
                    
                    <div class="loadermore" id="loadm"><div><img src="<?php echo image_path('skill/icon-8.png'); ?>"><span style="padding-left:20px;">加载更多发现……</span></div></div>
                    <div class="loadermore" id="loadn">
                        <!--<div><img src="<?php // echo image_path('skill/icon-8.png'); ?>"><span style="padding-left:20px;">全部加载完毕。</span></div>-->
                    </div>
                </div>
            </div>
            </div>
    	</div>
        
<div class="wrap-right-main">
            <div class="wrap-right">
                <div class="wrapuser-pto"><i><img src="<?php echo $user->getCover(); ?>"></i></div>
                <div class="wrapuser-na"><?php echo $user->getNickname(); ?></div>
                <div class="wrapuser-bq"><?php 
                            $data = array();
                            foreach($user->getChilds() as $child){
                                $data[] =  $child->getChildOld().'岁'.$child->getErziNverToString();
                            }
                            echo implode('、',$data);
                            ?>
                            的<?php echo User::$roles[$user->getRole()]; ?></div>
                
                <?php if($sf_user->isAuthenticated()): ?>
                    <?php if(UserAttentionTable::getInstance()->hasAttentionUser($sf_user->getAttribute('user_id'),$sf_request->getParameter('user_id'))): ?>
                        <div class="wrapuser-gz" ><a href="javascript:void(0);" id="attention" user_id="<?php echo $user->getId(); ?>">已关注</a></div>
                    <?php else: ?>
                        <div class="wrapuser-gz"><a href="javascript:void(0);" id="attention" user_id="<?php echo $user->getId(); ?>">+ 关注</a></div>
                    <?php endif; ?>
                <?php else: ?>
                        <div class="wrapuser-gz"><a href="javascript:void(0);" id="attention" user_id="<?php echo $user->getId(); ?>">+ 关注</a></div>
                <?php endif; ?>
                
                <div class="wrapuser-gzs">
                    <div class="fs"><i id="fans_num"><?php echo UserStatisticalTable::getInstance()->getStatistical($user->getId())->getFansNum(); ?></i><br><span>粉丝</span></div>
                    <div class="gz"><i id="attention_people"><?php echo UserStatisticalTable::getInstance()->getStatistical($user->getId())->getFloowMe(); ?></i><br><span>关注</span></div>
                </div>
            </div>
    
            <?php if($sf_user->isAuthenticated() && $sf_user->getAttribute('user_id') == $user->getId()): ?>
            <?php  include_partial('skill/menu'); ?>
            <?php  include_partial('skill/guess_like'); ?>
            <?php endif; ?>
        </div>    
    </div>
</div>
<script>
$(document).ready(function(){
//    
//    $.get('<?php echo url_for('skill/mabe_like_data'); ?>',{},function(data){
//        $("#mabe_list").html(data);
//    });
//    
//    $("#mabe_list").on('click','#like_next_page',function(){
//        
//        var page = parseInt($("#mabe_list").attr('page'))+1;
//        
//        $.get('<?php // echo url_for('skill/mabe_like_data'); ?>',{'page':page},function(data){
//            $("#mabe_list").html(data);
//            $("#mabe_list").attr('page',page);
//        });
//    });
//
//$("#mabe_list").on('click','#attention_other',function(){
//        var user_id = $(this).attr('user_id');
//        
//        $.post('<?php // echo url_for('skill/user_attention'); ?>',{'user_id': user_id},function(data){
//            var data = eval('('+data+')');
//            var error = data.error;
//            var msg = data.msg;
//            var attention_people = data.attention_people;
//            
//            alert(msg);
//            
//            if(error == 0){
//                 $("#attention_other").text('已关注');
//                 $("#attention_people").text(attention_people);
//            }else if(error == 1){
//                $("#attention_other").text('+ 关注');
//                $("#attention_people").text(attention_people);
//            }
//            
//        });
//    });

$("#attention").click(function(){
        
        var skill_id = $(this).attr('user_id');
        
        $.post('<?php echo url_for('skill/user_attention'); ?>',{'user_id': skill_id},function(data){
            var data = eval('('+data+')');
            var error = data.error;
            var msg = data.msg;
            var fans = data.fans;
            
            alert(msg);
            
            if(error == 0){
                 $("#attention").text('已关注');
                 $("#fans_num").text(fans);
            }else if(error == 1){
                $("#attention").text('+ 关注');
                $("#fans_num").text(fans);
            }
            
        })
    });
});
    
    
(function ($) {
  var $tiles = $('#tiles'),
    $handler = $('li', $tiles),
    page = 1,
    isLoading = false,
    apiURL = '<?php echo url_for('skill/personal_default_data'); ?>', //请求的地址
    lastRequestTimestamp = 0,
    fadeInDelay = 2000,
    $window = $(window),
    $document = $(document);

  //准备布局选项。
  var options = {
    autoResize: false, // 是否在浏览器窗口大小变化时进行重新布局。
    container: $('#tiles'), // 可选，额外的CSS样式
    offset: 12, // 可选，网格的距离
    itemWidth: 298, // 可选，网格的宽度
     align: 'left'
  };

  /**
   * 当滚动到底部时，添加更多的内容。
   */
  function onScroll(event){
    if (!isLoading) {
      var closeToBottom = ($window.scrollTop() + $window.height() > $document.height() - 100);
      if (closeToBottom) {
        var currentTime = new Date().getTime();
        if (lastRequestTimestamp < currentTime - 1000) {
          lastRequestTimestamp = currentTime;
          loadData();
        }
      }
    }
  };

  /**
   * 刷新布局
   */
  function applyLayout($newImages){
    options.container.imagesLoaded(function(){
      // 销毁旧的处理程序
      if ($handler.wookmarkInstance) {
        $handler.wookmarkInstance.clear();
      }

      // 创建一个新的布局处理程序
      $tiles.append($newImages);
      $handler = $('li', $tiles);
      $handler.wookmark(options);

      // 设置每个图片的不透明度
      $newImages.each(function(){
        var $self = $(this);
        window.setTimeout(function(){
          $self.css('opacity', 1);
        }, Math.random() * fadeInDelay);
      });
    });
  };

  /**
   * 加载数据
   */
  function loadData(){
    isLoading = true;
    $('#loaderCircle').show();

    $.ajax({
      url: apiURL,
      dataType: 'json', // 设置为JSON数据
      data: {page: page,user_id:<?php echo $sf_request->getParameter('user_id',0); ?>}, // 分页参数，以确保加载新的数据
      success: onLoadData
    });
  };

  /**
   * 从库中接收数据，创建HTML图像和更新布局
   */
  function onLoadData(response){
    isLoading = false;
    $('#loaderCircle').hide();

    // 増量页面索引
    page++;

    // 为图片创建HTML
    var html = '',
        data = response.data,
        i = 0, length = data.length, image, opacity,
        $newImages;

    for (; i < length; i++) {
      image = data[i];

      html += '<li>';
      html += '<a target="_blank" href="'+image.urlink+'" title="'+image.title+'">';
      //html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">'; //瀑布流布局
	  html += '<img src="'+image.preview+'" width="200" height="200">';
      html += '</a>';
      html += '<p class="lititle"><a target="_blank" href="'+image.urlink+'" title="'+image.title+'">'+image.title+'</a></p>';
	  html += '<p class="user-d"><i class="looknum">'+image.looknum+' 浏览</i><span><i class="collect">'+image.collectnum+'</i><i class="review">'+image.reviewnum+'</i></span></p>';
      html += '</li>';
    }

    $newImages = $(html);

    if (response.message == 'No more pictures') {
      $document.off('scroll', onScroll);
	  $('#loadm').hide();
	  $('#loadn').show();
    }else{
		$('#loadm').show();
	}

    applyLayout($newImages);
  };

  $document.on('scroll', onScroll);

  loadData();
})(jQuery);
</script>